<!-- @format -->

<template>
  <div>
    <!-- 1. 第1次使用，不传内容，可以写自闭合的单标签，走默认值 -->
    <MyTable :arr="list" />
    <hr />
    <!-- 2. 第2次使用，传内容，想展示头像图片，不走默认值 -->
    <MyTable :arr="list">
      <!-- obj变量是个对象，不解构 -->
      <!--
        <template #default="{ obj }">
          <img :src="obj.imgUrl" />
       </template>
      -->
      <!-- obj变量是个对象，配合解构 -->
      <template #default="{ imgUrl }">
        <img :src="imgUrl" />
      </template>
    </MyTable>
  </div>
</template>

<script>
  import MyTable from './components/MyTable.vue'
  export default {
    components: { MyTable },
    data() {
      return {
        list: [
          {
            name: '小传同学',
            age: 18,
            headImgUrl:
              'http://yun.itheima.com/Upload/./Images/20210303/603f2d2153241.jpg'
          },
          {
            name: '小黑同学',
            age: 25,
            headImgUrl:
              'http://yun.itheima.com/Upload/./Images/20210304/6040b101a18ef.jpg'
          },
          {
            name: '智慧同学',
            age: 21,
            headImgUrl:
              'http://yun.itheima.com/Upload/./Images/20210302/603e0142e535f.jpg'
          }
        ]
      }
    }
  }
</script>

<style></style>
